<template>
    <div>
         <el-card class="!border-none" shadow="never">
            <div class="w-2/3">
                <el-table  size="large" v-loading="pager.loading" :data="pager.lists">
                    <el-table-column label="序号" type="index" :index="indexAdd" min-width="100" />
                    <el-table-column label="名称" min-width="120" prop="name" />
                    <el-table-column label="图片" min-width="160" prop="icon">
                        <template #default="{ row }">
                            <div class="flex align-middle">
                                <el-image style="width: 38px; height: 38px"
                                        :src="row.icon"
                                        :zoom-rate="1.2"
                                        :max-scale="7"
                                        :min-scale="0.2" 
                                        fit="contain"
                                        :preview-teleported="true"
                                        :preview-src-list="[row.icon]"></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" min-width="120" prop="status" >
                        <template #default="{row}">
                            <span v-if="row.status == 0">停用</span>
                            <span v-if="row.status == 1">启用</span>
                        </template>
                    </el-table-column>
                     <el-table-column label="操作" width="180" fixed="right">
                        <template #default="{row}">
                            <router-link
                                v-if="row.type == 1"
                                v-perms="['article.gongju/getBankList']"
                                :to="{ path: getRoutePath('article.gongju/getBankList') }"
                            >
                                <el-link class="mr-4" v-perms="['article.gongju/getBankList']" type="primary" :underline="false">地址管理</el-link>
                            </router-link>
                            <router-link
                                v-if="row.type == 3"
                                v-perms="['article.word/wordType']"
                                :to="{ path: getRoutePath('article.word/wordType') }"
                            >
                                <el-link class="mr-4" v-perms="['article.word/wordType']" type="primary" :underline="false">文档管理</el-link>
                            </router-link>
                            <el-link class="link mr-4" type="primary" :underline="false" @click="handleEdit(row)">修改</el-link>
                            <el-link v-if="row.status == 0" class="link" type="primary" :underline="false" @click="handleOpen(row)">启用</el-link>
                            <el-link v-if="row.status == 1" class="link" type="danger" :underline="false" @click="handleClose(row)">停用</el-link>
                        </template>
                     </el-table-column>
                </el-table>
            </div>
        </el-card>
        <popup
            ref="popupRef"
            title="修改"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
        >
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入名称" clearable />
                </el-form-item>
                <el-form-item label="icon" prop="icon">
                    <div class="w-80">
						<div>
							<material-picker v-model="formData.icon" :limit="1"/>
						</div>
						<div class="form-tips">支持扩展名：.jpg .jpeg .png </div>
					</div>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <div>
                        <el-input-number v-model="formData.sort" :min="0" :max="9999" />
                        <div class="form-tips">默认为0， 数值越大越排前</div>
                    </div>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup name="list">
import type { FormInstance } from 'element-plus'
import { getRoutePath } from '@/router'
import { gongjuList, changeGongjuStatus, saveGongju } from '@/api/platformTool'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import Popup from '@/components/popup/index.vue'
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: gongjuList,
    params: {}
})
getLists()
const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}

const formData:any = reactive({
    id: '',
    name: '',
    icon: '',
    status: '',
    sort: ''
})
const formRules = {
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: ['blur']
        }
    ],
    icon: [
        {
            required: true,
            message: '请选择icon',
            trigger: ['blur']
        }
    ]
}
const handleEdit = (row:any) => {
    Object.keys(formData).forEach((key) => {
        formData[key] = row[key]
    })
    popupRef.value?.open()
}
const handleSubmit = async () => {
    await formRef.value?.validate()
    // console.log(formData)
    await saveGongju(formData)
    popupRef.value?.close()
    getLists();
}
const handleOpen = async (row:any) => {
    try{
        await feedback.confirm('启用之后，用户可看到该工具，是否确认启用？')
        await changeGongjuStatus({
            id: row.id,
            status: 1
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}
const handleClose = async (row:any) => {
    try{
        await feedback.confirm('停用之后，用户将不能看到该工具，是否确认停用？')
        await changeGongjuStatus({
            id: row.id,
            status: 0
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

</script>